<h2 style="margin-top:30px;">{{ str.application_edu_higher }} <span>{{ str.application_edu_higher_desc }}</span></h2>

<div class="table">
    {% for s in highschools|dictsort:"start" %}
    <div class="table_row" alt="{{ q.key }}">
        <div class="table_cell" style="white-space:nowrap;">
            {% if application_readonly %}
            {{ s.organisation|default:"" }}
            {% else %}
            <input type="text" class="autosave_highschool" name="organisation" value="{{ s.organisation|default:"" }}" alt="{{ s.key }}" placeholder="{{ str.school_name }}" maxlength="500" style="width:200px;" />
            {% endif %}
        </div>
        <div class="table_cell" style="white-space:nowrap;">
            {% if application_readonly %}
            {{ s.start|default:"" }} - {{ s.end|default:"" }}
            {% else %}
            <input type="text" class="autosave_highschool" name="start" value="{{ s.start|default:"" }}" placeholder="{{ str.start_date }}" maxlength="500" style="width:100px;" /> -
            <input type="text" class="autosave_highschool" name="end" value="{{ s.end|default:"" }}" placeholder="{{ str.end_date }}" maxlength="500" style="width:100px;" />
            {% endif %}
        </div>
        <div class="table_cell">
            {% if application_readonly %}
            {{ s.description|default:"" }}
            {% else %}
            <input type="text" class="autosave_highschool" name="description" value="{{ s.description|default:"" }}" placeholder="{{ str.additional_info }}" maxlength="500" style="width:410px;" />
            {% endif %}
        </div>
    </div>
    {% endfor %}
    {% if application_readonly %}{% else %}
    <div id="new_highschool" class="table_row" alt="{{ q.key }}">
        <div class="table_cell">
            <input type="text" class="autosave_highschool new_highschool" name="organisation" placeholder="{{ str.school_name }}" maxlength="500" style="width:200px;">
        </div>
        <div class="table_cell">
            <input type="text" class="autosave_highschool new_highschool" name="start" placeholder="{{ str.start_date }}" maxlength="500" style="width:100px;"> -
            <input type="text" class="autosave_highschool new_highschool" name="end" placeholder="{{ str.end_date }}" maxlength="500" style="width:100px;">
        </div>
        <div class="table_cell" style="">
            <input type="text" class="autosave_highschool new_highschool" name="description" placeholder="{{ str.additional_info }}" maxlength="500" style="width:410px;">
        </div>
    </div>
    {% endif %}
</div>

<div style="margin-top:10px;">
    <input type="checkbox" id="have_been_subsidised" name="have_been_subsidised"{% if person.have_been_subsidised %} checked{% endif %} style="margin:0px padding:0px; border:none;" /><label for="have_been_subsidised" id="have_been_subsidised_label">{{ str.application_edu_been_subsidised }}</label>
</div>

<script>
    $(document).ready(function(){
        $('.new_highschool').keypress(function() {
            var newhighschool = $('#new_highschool').clone(true);
            newhighschool.find('input').attr('alt', '');
            newhighschool.find('input').val('');

            $('.new_highschool').unbind('keypress');
            $('.new_highschool').removeClass('new_highschool');

            newhighschool.find('input').addClass('new_highschool');
            $('#new_highschool').after(newhighschool);
            $('#new_highschool').attr('id', '');
        });

        $('.autosave_highschool').change(function() {
            var input = $(this);
            autoSave(input, '{{ post_url }}/cv', {
                type: 'higher_education',
                key: input.parent().parent().find('input[alt!=""]').attr('alt')
            });
        });

        $('#have_been_subsidised').change(function() {
            var checkbox = $(this);
            autoSave(checkbox, '{{ post_url }}/person', {
                value: checkbox.is(':checked'),
            });
        });
    });
</script>